<template>
    <el-container>
        <el-main>
            <el-card class="box-card st-info">
                <el-descriptions title="客户信息">
                    <el-descriptions-item label="客户姓名">{{ statement.customerName }}</el-descriptions-item>
                    <el-descriptions-item label="联系方式">{{ statement.customerPhone }}</el-descriptions-item>
                    <el-descriptions-item label="车牌号码">{{ statement.licensePlate }}</el-descriptions-item>
                    <el-descriptions-item label="汽车类型">
                        {{ statement.carSeries }}
                    </el-descriptions-item>
                    <el-descriptions-item label="服务类型">
                        <dict-tag :options="dict.type.bus_service_type" :value="statement.serviceType" />
                    </el-descriptions-item>
                    <el-descriptions-item label="到店时间">{{ statement.actualArrivalTime }}</el-descriptions-item>
                    <el-descriptions-item label="总消费金额">{{ statement.totalMount }}</el-descriptions-item>
                    <el-descriptions-item label="实付金额">{{ statement.totalMount - statement.discountAmount
                    }}</el-descriptions-item>
                    <el-descriptions-item label="优惠金额">{{ statement.discountAmount }}  </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card class="box-card st-table">
               
                <el-table :data="items">
                    <!-- <el-table-column type="selection" width="55" align="center" /> -->
                    <el-table-column label="名称" align="center" prop="itemName" />
                    <el-table-column label="价格" align="center" prop="itemPrice" />
                    <el-table-column label="数量" align="center" prop="itemQuantity"> </el-table-column>
                   
                </el-table>
            </el-card>
        </el-main>
        

    </el-container>
</template>

<script>

import { getStatement ,getStatementItems} from "@/api/appointment/statement";
export default {
    name: "StatementItemDetails",
    dicts: [ 'bus_service_type'],
    data() {
        return {
            statement: {},
            items: []
        };
    },
    created() {
       
        const statementId = this.$route.params && this.$route.params.statementId;

        getStatement(statementId).then(response => {
            this.statement = response.data || {};
        });
        getStatementItems(statementId).then(response => {
            
            this.items = response.data || [];
        })

    },
    methods: {
       
    }

}
</script>

<style>
.box-card {
    margin-top: 10px;
}

.el-aside {
    background: none;
    margin-top: 10px;
    padding: 20px, 20px, 20px, 0;
}

.st-info {
    height: 250px;
}

.st-table {
    height: 550px;
}
</style>